<template>
  <el-scrollbar>
    <div class="recommend">
      <div class="info">
        <div class="recommend-container">

          <!-- 轮播图 -->
          <el-carousel :interval="3000" type="card" :autoplay="true">
            <el-carousel-item v-for="(item,index) in myBanner" :key="index">
              <img v-lazy="item.imageUrl"></img>
            </el-carousel-item>
          </el-carousel>

          <!-- 分类 -->
          <div class="recommend-fl">
            <div class="recommend-fl-item">
              <div class="recommend-fl-item-ico el-icon-coffee-cup"></div>
              <div class="recommend-fl-item-text">
                <p>私人FM</p>
                <p>享受你的音乐专属推荐</p>
              </div>
            </div>
            <div class="recommend-fl-item">
              <div class="recommend-fl-item-ico el-icon-goblet-square"></div>
              <div class="recommend-fl-item-text">
                <p>每日歌曲推荐</p>
                <p>根据你的口味生成</p>
              </div>
            </div>
            <div class="recommend-fl-item">
              <div class="recommend-fl-item-ico el-icon-milk-tea"></div>
              <div class="recommend-fl-item-text">
                <p>排行榜</p>
                <p>最热音乐榜</p>
              </div>
            </div>
          </div>

          <!-- 推荐歌单 -->
          <div class="recommend-gd">
            <div class="recommend-title">
              <div class="title-left"><i class="el-icon-date"></i><span>推荐歌单</span></div>
              <div class="title-right">更多<i class="el-icon-arrow-right"></i></div>
            </div>
            <div class="gd-list">
              <ul>
                <li class="ellipsis imgli0" v-for="item in recommendsongs" :key="item.id" @click="jump(item.id)">
                   <div class="gd-list-pic"><img v-lazy='item.picUrl'/></div>
                   <p class="ellipsis">{{item.name}}</p>
                </li>
              </ul>
            </div>
          </div>

          <!-- 独家放送 -->
          <div class="recommend-dj">
            <div class="recommend-title">
              <div class="title-left"><i class="el-icon-document-copy"></i><span>独家放送</span></div>
              <div class="title-right">更多<i class="el-icon-arrow-right"></i></div>
            </div>
            <div class="dj-list">
              <ul>
                <li class="ellipsis" v-for="(item,index) in sole" :key="index">
                   <div class="dj-list-pic"><img v-lazy="item.sPicUrl"/></div>
                   <p class="ellipsis">{{item.name}}</p>
                </li>
              </ul>
            </div>
          </div>

          <!-- 最新音乐 -->
          <div class="recommend-yy">
            <div class="recommend-title">
              <div class="title-left"><i class="el-icon-headset"></i><span>最新音乐</span></div>
              <div class="title-right">更多<i class="el-icon-arrow-right"></i></div>
            </div>
            <div class="yy-list">
               <ul>
                 <li v-for="(item,index) in newmusic" :key="item.id" @dblclick="playmusic(item)">
                   <div class="yy-list-index">{{index+1 | filterNumber}}</div>
                   <div class="yy-list-img"><img v-lazy="item.picUrl" alt=""></div>
                   <div class="yy-list-name">
                     <p>{{item.name}}</p>
                     <p>{{item.song.artists[0].name}}</p>
                   </div>
                 </li>
               </ul>
            </div>
          </div>

          <!-- 推荐MV -->
          <div class="recommend-mv">
            <div class="recommend-title">
              <div class="title-left"><i class="el-icon-video-play"></i><span>推荐MV</span></div>
              <div class="title-right">更多<i class="el-icon-arrow-right"></i></div>
            </div>
            <div class="mv-list">
              <ul>
                <li v-for="(item,index) in recommendMV" :key="index">
                  <div class="mv-list-img"><img v-lazy="item.picUrl" alt=""></div>
                  <p>{{item.name}}</p>
                  <p>{{item.artistName}}</p>
                </li>
              </ul>
            </div>
          </div>

          <!-- 主播电台 -->
          <div class="recommend-dt">
            <div class="recommend-title">
              <div class="title-left"><i class="el-icon-mic"></i><span>主播电台</span></div>
              <div class="title-right">更多<i class="el-icon-arrow-right"></i></div>
            </div>
            <div class="dt-list">
               <ul>
                 <li v-for="item in recommendDj" :key="item.id">
                   <div class="dt-list-img"><img v-lazy="item.picUrl" alt=""></div>
                   <div class="dt-list-text">
                     <p>{{item.name}}</p>
                     <p>{{item.program.radio.name}}</p>
                   </div>
                 </li>
               </ul>
            </div>
          </div>


        </div>
      </div>
    </div>
  </el-scrollbar>
</template>
<script>
  import {getBanner,getRecommendSongs,getSole,getNewMusic,getRecommendMV,getRecommendDj} from '@/api/api'
  export default {
    data() {
      return {
        myBanner: [], //获取banner
        recommendsongs:[], //获取推荐歌单
        sole:[], //获取独家放送
        newmusic:[], //最新音乐
        recommendMV:[], //推荐MV
        recommendDj:[],//推荐电台
      }
    },
    methods: {

      //播放音乐
      playmusic(item){
        this.$store.commit("GET_MUSIC_URL",item.id);
        this.$store.commit("GET_MUSIC_INFO",item.id);
      },

      // 歌单跳转详情页
      jump(id){
        this.$router.push({path:'songlistd',query:{id:id}});
      },

      // 调用banner Api 或者banner图
      _getbanner() {
        getBanner().then(res => {
          if (res.status === 200) {
            this.myBanner = res.data.banners;
          } else {
            console.error("获取失败");
          }
        });
      },
      // 推荐歌单api
      _getrecommendsongs(){
        getRecommendSongs(10).then(res=>{
          if(res.status === 200){
            this.recommendsongs = res.data.result;
            // console.log(this.recommendsongs);
          }else{
            console.error("获取失败");
          }
        })
      },

      //独家放送
      _getsole(){
        getSole().then(res=>{
          if(res.status === 200){
            this.sole = res.data.result;
            // console.log(this.sole);
          }else{
            console.error("获取失败");
          }
        });
      },

      // 最新音乐
      _getnewmusic(){
        getNewMusic().then(res=>{
          if(res.status === 200){
            this.newmusic = res.data.result;
            // console.log(this.newmusic)
          }else{
            console.error("获取失败");
          }
        });
      },

      // 推荐MV
      _getrecommendmv(){
        getRecommendMV().then(res=>{
          if(res.status === 200){
            this.recommendMV = res.data.result.splice(0,3);
            // console.log(this.recommendMV);
          }else{
            console.error("获取失败");
          }
        })
      },

      // 推荐电台
      _getrecommenddj(){
        getRecommendDj().then(res=>{
          if(res.status === 200){
            this.recommendDj = res.data.result;
            // console.log(this.recommendDj);
          }else{
            console.error("获取失败");
          }
        })
      }

    },
    mounted() {
      this._getbanner();
      this._getrecommendsongs();
      this._getsole();
      this._getnewmusic();
      this._getrecommendmv();
      this._getrecommenddj();
    },
  }
</script>
<style scoped="scoped">
  .recommend {
    width: 100%;
    height: auto;
    padding: 0px 28px;
  }

  .recommend-container {
    width: 100%;
    height: auto;
    overflow: hidden;
    padding-bottom: 60px;
  }

  >>>.el-carousel {
    margin: 24px 0px 28px;
  }

  >>>.el-carousel__container {
    height: 185px;
  }

  .el-carousel__item {
    height: 100%;
    transform-origin: bottom;
  }

  .el-carousel__item img {
    display: block;
    width: 100%;
    height: 100%;
  }

  >>>.el-carousel__item--card.is-in-stage {
    transform-origin: bottom;
  }

  >>>.el-carousel__indicators--outside {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
  }

  >>>.el-carousel__indicators--outside button {
    background-color: #FFFFFF;
    opacity: 1;
    width: 20px;
    height: 1px;
  }

  >>>.el-carousel__indicators--outside .is-active button {
    background-color: #C62E2E;
    opacity: 1;
  }

  .recommend-fl {
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
  }

  .recommend-fl .recommend-fl-item {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 1px solid #E4E4E7;
  }

  .recommend-fl .recommend-fl-item:nth-last-of-type(1) {
    border-right: 0;
  }

  .recommend-fl-item .recommend-fl-item-ico {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    border: 1px solid #e6acad;
    font-size: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #e72e2e;
  }

  .recommend-fl-item .recommend-fl-item-text {
    padding-left: 12px;
    line-height: 24px;
  }

  .recommend-fl-item-text p:nth-of-type(1) {
    font-size: 15px;
    color: #000000;
    /* font-weight: 600; */
  }

  .recommend-fl-item-text p:nth-of-type(2) {
    font-size: 12px;
    color: #999999;
  }

  .recommend-gd,
  .recommend-dj,
  .recommend-yy,
  .recommend-mv,
  .recommend-dt{
    width: 100%;
    height: auto;
    margin-top: 15px;
  }

  .recommend-title {
    width: 100%;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #E4E4E7;
  }

  .recommend-title .title-left {
    color: #333;
    display: flex;
    align-items: center;
    font-size: 15px;
  }

  .recommend-title .title-left i {
    color: #C62E2E;
    margin-right: 5px;
    font-size: 20px;
  }

  .recommend-title .title-right {
    color: #999999;
    font-size: 12px;
  }

  .gd-list,
  .dj-list,
  .yy-list,
  .mv-list,
  .dt-list{
    width: 100%;
    height: auto;
  }

  /* 推荐歌单 */
  .gd-list>ul{
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  .gd-list>ul>li{
    width: 182px;
    height: auto;
    margin-top: 10px;
  }
  .gd-list>ul>li>.gd-list-pic{
    width: 100%;
    height: 182px;
    overflow: hidden;
    border: 1px solid #E4E4E7;
  }
  .gd-list>ul>li>.gd-list-pic img{
    width: 100%;
    display: block;
  }
  .gd-list>ul>li>p{
    line-height: 40px;
    color: #333333;
    font-size: 15px;
  }

  /* 独家放送 */
  .dj-list>ul{
    width: 100%;
    display: flex;
    justify-content: space-between;
  }
  .dj-list>ul>li{
    width: 316px;
    height: auto;
    margin-top: 10px;
  }
  .dj-list>ul>li>.dj-list-pic{
    width: 100%;
    height: 180px;
    overflow: hidden;
    border: 1px solid #E4E4E7;
  }
  .dj-list>ul>li>.dj-list-pic img{
    display: block;
    width: 100%;
  }
  .dj-list>ul>li>p{
    line-height: 40px;
    color: #333333;
    font-size: 15px;
  }

  /* 最新音乐 */
  .yy-list{
    margin-top: 10px;
  }
  .yy-list ul{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
  }
  .yy-list ul li{
    width: 50%;
    height: 60px;
    display: flex;
    align-items: center;
    padding: 6px 0;
  }
  .yy-list ul li:nth-of-type(2n-1){
    border-right: 1px solid #E4E4E7;
  }
  .yy-list ul li:nth-of-type(4n-3),
  .yy-list ul li:nth-of-type(4n-2){
    background-color: #F4F4F6;
  }
  .yy-list ul li:nth-of-type(4n-3):hover,
  .yy-list ul li:nth-of-type(4n-2):hover{
    background-color: #ececed;
  }
  .yy-list ul li:nth-of-type(4n-1):hover,
  .yy-list ul li:nth-of-type(4n):hover{
    background-color: #F2F2F3;
  }
  .yy-list ul li .yy-list-index{
    width: 35px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .yy-list ul li .yy-list-img{
    width: 48px;
    height: 100%;
    overflow: hidden;
  }
  .yy-list ul li .yy-list-img img{
    width: 100%;
    display: block;
  }
  .yy-list ul li .yy-list-name{
    flex: 1;
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    padding-left: 12px;
    line-height: 26px;
  }
  .yy-list ul li .yy-list-name>p:nth-of-type(1){
    font-size: 15px;
    color: #000;
  }
  .yy-list ul li .yy-list-name>p:nth-of-type(2){
    font-size: 12px;
    color: #999;
  }


  /* 推荐MV */
  .mv-list ul{
    display: flex;
    justify-content: space-between;
  }
  .mv-list ul li{
    width: 316px;
    height: auto;
    margin-top: 10px;
  }
  .mv-list ul li .mv-list-img{
    width: 100%;
    height: 179px;
    overflow: hidden;
    border: 1px solid #E4E4E7;
  }
  .mv-list ul li .mv-list-img img{
    display: block;
    width: 100%;
  }
  .mv-list ul li>p:nth-of-type(1){
    font-size: 15px;
    color: #333333;
    line-height: 34px;
  }
  .mv-list ul li>p:nth-of-type(2){
    font-size: 12px;
    color: #999999;
  }

  /* 主播电台 */
  .dt-list ul{
    display: flex;
    flex-wrap: wrap;
  }
  .dt-list ul li{
    width: 50%;
    height: auto;
    padding: 10px 0;
    display: flex;
    border-bottom: 1px solid #E4E4E7;
  }
  .dt-list ul li .dt-list-img{
    width: 70px;
    height: 70px;
    border: 1px solid #E4E4E7;
    overflow: hidden;
  }
  .dt-list ul li .dt-list-img img{
    display: block;
    width: 100%;
  }
  .dt-list ul li .dt-list-text{
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 8px;
    line-height: 28px;
  }
  .dt-list ul li .dt-list-text p:nth-of-type(2){
    font-size: 12px;
    color: #999999;
  }


</style>
